<script setup>
import { ref, onMounted } from "vue";
import { getNewList } from "@/api/index";
import $ from "jquery";
const newsList = ref();
const getnewsList = async () => {
  const {
    data: {
      data: { list },
    },
  } = await getNewList();
  // console.log();
  // index.value = index1 + 1;
  newsList.value = list;
  $(function () {
    $(".news1:first").show().siblings(".news1").hide();
    var index = 0;
    $(".img-right").click(() => {
      index++;
      console.log(index);
      if (index < 3) {
        $(".news1").eq(index).show().siblings(".news1").hide();
      } else {
        index = -1;
      }
    });
    $(".img-left").click(() => {
      index--;
      if (index >= 0) {
        $(".news1").eq(index).show().siblings(".news1").hide();
      } else {
        index = 3;
      }
    });
    $(".none2").click(function () {
      var bElement = $(".uls");
      if (bElement.is(":visible")) {
        bElement.hide();
      } else {
        bElement.show();
      }
    });
  });
};
$(function () {
    $(".news1:first").show().siblings(".news1").hide();
    var index = 0;
    $(".img-right").click(() => {
        index++;
        console.log(index);
        if (index < 3) {
            $(".news1").eq(index).show().siblings(".news1").hide();
        } else {
            index = -1;
        }
    });
    $(".img-left").click(() => {
        index--;
        if (index >= 0) {
            $(".news1").eq(index).show().siblings(".news1").hide();
        } else {
            index = 3;
        }
    });
    $(".none2").click(function () {
        var bElement = $(".uls");
        if (bElement.is(":visible")) {
            bElement.hide();
        } else {
            bElement.show();
        }
    });
});
onMounted(()=>{
    getnewsList();
})
</script>
<template>
    <div id="index">
        <div class="news">
            <div class="news-top">
                <div class="news-top1">院部新闻</div>
                <div class="news-top2">
                    <div>查看更多</div>
                    <div><img src="../assets/sucai/next.png" /></div>
                </div>
            </div>
            <div class="news-content">
        <div class="news1" v-for="(item,index) in newsList" :key="item.id">
          <div class="news-left">
            <img class="image3" :src="item.image" alt="" />
            <div class="none1">{{ item.title }}</div>
          </div>
          <div class="news-right">
            <div class="top top-none">
              {{ item.title }}
            </div>
            <div class="top top-none1">
              传承八一精神 凝聚奋进力量|旅游与服务系第一第二党支部开展主题...
            </div>
            <div class="center">
              <div class="border"></div>
              <div class="time">{{ item.create_time }}</div>
            </div>
            <div class="bottom bottom-none">
              {{ item.abstract }}
            </div>
            <div class="bottom bottom-none1">
              传承八一精神
              凝聚奋进力量|旅游与服务系第一第二党支部开展主题，传承八一精神...
            </div>
            <div class="bottom-img">
              <div class="bottom-left">
                <img src="../assets/sucai/qianjin.png" alt="" class="img-left" />
                <img src="../assets/sucai/qianjin.png" alt="" class="img-right" />
              </div>
              <div class="bottom-right">
                <span>{{ index+1 }}</span>/{{ newsList.length }}
              </div>
            </div>
          </div>
        </div>
      </div>
            <div class="news-bottom">
                <div class="bottom-content" v-for="item in 3" :key="item">
                    <div class="content-top">
                        传承八一精神 凝聚奋进力量 | 旅游与服务系第一第二。支部开展主题...
                    </div>
                    <div class="content-bottom">
                        <img src="../assets/素材/表.png" alt="" />
                        2022-11-02
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#index {
    position: relative;

    .news {
        width: 90%;
        margin: 0 auto 50px;

        .news-top {
            display: flex;
            justify-content: space-between;
            margin: 20px 0 10px;
            .news-top1 {
                color: #196bb3;
                font-size: 22px;
                font-weight: bold;
            }

            .news-top2 {
                color: #ccc;
                font-size: 14px;
                display: flex;

                img {
                    width: 20px;
                    height: 20px;
                }
            }
        }

        .news-content {
            .news1 {
                width: 100%;
                display: flex;
                text-align: center;
                justify-content: space-between;

                @media (max-width:475px) {
                    display: block;
                }

                .news-left {
                    width: 49%;
                    height: 350px;
                    border-radius: 10px;
                    overflow: hidden;
                    box-shadow: 5px 5px 5px #ccc;

                    @media (max-width:475px) {
                        width: 100%;
                        height: 200px;
                        margin-bottom: 20px;
                    }

                    .none1 {
                        display: none;
                    }

                    .image3 {
                        width: 100%;
                        height: 350px;

                        @media (max-width:475px) {
                            height: 200px;
                        }
                    }
                }

                .news-right {
                    height: 350px;
                    border: 1px solid #f1f1f1;
                    border-radius: 10px;
                    width: 49%;
                    box-shadow: 5px 5px 5px #ccc;
                    position: relative;
                    @media (max-width:475px) {
                        width: 100%;
                    }

                    .top {
                        text-align: left;
                        padding: 15px;
                        font-size: 18px;
                    }

                    .top-none1 {
                        display: none;
                    }

                    .center {
                        display: flex;
                        align-items: center;
                        padding: 15px;
                        justify-content: space-between;

                        .border {
                            width: 70%;
                            border-bottom: 2px solid #e3e3e3;
                        }

                        .time {
                            color: #d33939;
                            padding: 10px;
                            width: 30%;
                        }
                    }

                    .bottom {
                        text-align: left;
                        padding: 15px;
                        color: #000;
                        z-index: 999;
                    }

                    .bottom-none1 {
                        display: none;
                    }

                    .bottom-img {
                        display: flex;
                        justify-content: space-between;
                        padding-top: 15px;
                        padding-left: 15px;
                        padding-right: 15px;
                        width: 100%;
                        position: absolute;
                        bottom: 20px;
                        .bottom-left {
                            img {
                                width: 40px;
                                height: 40px;
                            }

                            img:nth-child(1) {
                                transform: rotate(180deg);
                                margin-left: 10px;
                                margin-right: 10px;
                            }

                            img:hover {
                                filter: drop-shadow(0 0 0 red);
                            }
                        }

                        .bottom-right {
                            span {
                                color: #2759ad;
                                font-size: 24px;
                            }
                        }
                    }
                }
            }
        }

        .news-bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;

            @media (max-width:475px) {
                display: block;
            }

            .bottom-content {
                width: 32%;
                border: 1px solid #f8f8f8;
                padding: 15px;
                border-radius: 10px;
                box-shadow: 5px 5px 5px #ccc;

                @media (max-width:475px) {
                    width: 100%;
                    margin-bottom: 20px;
                }

                .content-top {
                    font-size: 18px;
                }

                .content-bottom {
                    display: flex;
                    justify-content: right;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    color: #2759ad;

                    img {
                        width: 20px;
                    }
                }
            }

            .bottom-content:hover {
                background-color: #aec8e5;
            }
        }
    }
}
</style>